// CustomUpload.vue
<template>
  <div class="upload">
    <el-upload
      class="avatar-uploader"
      :class="{ disabled: imglist.length >= limit }"
      action="false"
      ref="uploadref"
      accept="image/png,image/gif,image/jpg,image/jpeg"
      list-type="picture-card"
      :auto-upload="false"
      :before-upload="beforeUpload"
      :on-change="handleImgChange"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :limit="limit"
      :file-list="imglist"
      :on-exceed="handleExceed"
    >
      <template #tip v-if="tip">
        <div class="el-upload__tip">
          {{ tip }}
        </div>
      </template>
      <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
      <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
    </el-upload>
    <el-dialog
      v-model="imgdialogVisible"
      width="600px"
      append-to-body
      class="uploadimgDialog"
    >
      <img style="width: 100%" :src="dialogImageUrl" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { defineEmits, defineProps, ref } from "vue";
const emit = defineEmits(["file-uploaded", "file-remove"]);
const props = defineProps({
  tip: {
    type: String,
    default: "",
  },
  uploadId: {
    type: Number,
  },
  name: {
    type: String,
    default: "",
  },
  imglist: {
    type: Array,
    default: () => [],
  },
  limit: {
    type: Number,
    default: 3,
  },
  id: {
    type: Number,
    default: 0,
  },
});

const uploadref = ref(null);
const handleImgChange = (uploadFile, uploadFiles) => {
  // console.log(89808908908);
  const isJPG =
    uploadFile.raw.type === "image/jpeg" ||
    uploadFile.raw.type === "image/png" ||
    uploadFile.raw.type === "image/jpg" ||
    uploadFile.raw.type === "image/gif";
  const isLt10M = uploadFile.raw.size / 1024 / 1024 < 10;
  if (!isJPG) {
    ElMessage.error("上传图片只能是 png、gif、jpeg、jpg 格式!");
    uploadref.value.clearFiles();
    return false;
  } else if (!isLt10M) {
    ElMessage.error("上传图片大小不能超过 10MB!");
    uploadref.value.clearFiles();
    return false;
  }

  emit("file-uploaded", {
    uploadId: props.uploadId,

    name: props.name,
    fileData: uploadFiles,
  });
};
const handleRemove = (file, fileList) => {
  emit("file-remove", {
    uploadId: props.uploadId,
    name: props.name,
    fileData: file,
    fileList: fileList,
    id: props.id,
  });
};

let imgdialogVisible = ref(false);
let dialogImageUrl = ref("");
const handlePreview = (file) => {
  imgdialogVisible.value = true;
  dialogImageUrl.value = file.url;
};

//文件长度限制
const handleExceed = (files, fileList) => {
  ElMessage.error(`当前限制选择 ${props.limit} 个文件`);
  return false;
};

//图片上传限制大小
const beforeUpload = (file) => {};
</script>

<style scoped>
.avatar-uploader-icon {
  width: 100px;
  height: 100px;
}
.avatar {
  max-width: 200px;
  max-height: 120px;
}
.uploadIco {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 17px !important;
}

.disabled ::v-deep .el-upload--picture-card {
  display: none !important;
}
</style>
